<template>
  <div style="text-align: center; width: 98.9vw;height: 100%;background: #f4f4f4;">
    <div v-if="mom==1"
        style="width: 75vw;height:100%;margin: auto;display: flex;padding: 5vh 0 0 3vw;">
      <div style="width:10vw; border-radius:10px ; height: 70%; box-shadow: 1px 2px 20px 1px rgba(0, 0, 0, 0.2);">
        <ul style="margin:0; padding:0;">
          <h3 class="ulH3">视频分类</h3>
          <li v-for="(itme,i) in  courses" @click="liId(i)" :key="i">{{ itme }}</li>
        </ul>
      </div>
      <div class="Coursemainbody">
        <div v-for="(coudata,i) in courseData " :key="i" class="coursebox" @click="CourseDetails(coudata.id,coudata.member)">
          <img :src="coudata.courseCover" style="z-index: -1;" width="100%" height="67%" alt="">
          
          <div v-if="coudata.member=='1'" class="viplabel">vip</div>
          <div v-if="coudata.member=='0'" class="viplabel">免费</div>

          <div style="width: 100%;height: 33%; margin-top: -2%; background-color: white;">
            <h3 class="title">{{ coudata.courseName }}</h3>
            <br>
            <div style="padding: 2% 0 0 3%">
              <p style="color: black; float: left; margin-top: 2%;"><i class="el-icon-user"></i> 1251人以学习</p>
            </div>
          </div>
          <div class="slidebox">
            <img style="width: 30%;" src="../../../assets/img/paly.png" alt="">
            <div class="slideboxdiv">
              <p>{{ coudata.courseInformation }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
   
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      mom:1,
      courseData: [],
      courses:['MYSQL','JAVA','Python','c++','Linux', '其他课程']
    }
  },
  mounted() {
    var that = this
    axios({
      method: 'get',
      url: 'api/Course',
    }).then(function (res) {
      that.courseData = res.data
    })
  },
  methods: {
    CourseDetails(id,member) {
      var that = this
      that.$store.state.CourseId=id
      that.$store.state.CourseMerber=member
      that.$router.replace("/secondsheets/CourseDetails") 
    },
    liId(i){
      var that = this
      var index=i+1
      axios({
      method: 'get',
      url: 'api/Course',
    }).then(function (res) {
      var temporaryCourse=[]
      for(var j in res.data){
        if(res.data[j].classification==index){
          temporaryCourse.push(res.data[j])
        }
      }
      that.courseData = temporaryCourse
    })
  
      that.t
    }
  }
}
</script>

<style>
li {
  list-style: none;
  height: 5vh;
  padding-top: 1.3vh;
}

.ulH3{
  background-color:#68cb9b; ;color: white; height: 6vh;border-radius:10px 10px 0 0 ;padding-top: 6%;
}
.Coursemainbody {
  width: 65vw;
  height: 105%;
  margin-left: 1vw;
  padding: 3vh 0 0 1vw;
}

.coursebox {
  width: 14vw;
  height: 25vh;
  margin-right: 1vw;
  border-radius: 10%;
  margin-top: 2%;
  overflow: hidden;
  float: left;
  position: relative;
}

.title {
  color: black;
  float: left;
  margin-left: 5%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slidebox {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65);
  position: absolute;
  top: 100%;
  transition: top 0.25s ease;
}

.coursebox:hover .slidebox {
  top: 0%;
}

.Courselabelbox {
  width: 25%;
  height: 3vh;
  margin-right: 5%;
  border-radius: 10px;
  color: black;
  /* float: left; */
}

.viplabel {
  width: 40%;
  height: 15%;
  background-color: #fadb41;
  float: right;
  text-align: center;
  position: absolute;
  top: 1px;
  left: 70%;
  transform:rotate(45deg)
  
  /* transform: translate(-50%, -50%); */
}

.slideboxdiv {
  background-color: white;
  width: 100%;
  height: 55%;
  margin-top: 7%;
}

.slidebox p {
  font-size: 13px;
  padding: 5% 5% 5% 5%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}
</style>